/* components */
import PlanTimeDialog from '@src/modules/task/view/components/PlanTimeDialog.vue';
import CalendarPlanTimeDialog from '@src/modules/task/view/components/CalendarPlanTimeDialog.vue';
import TaskTransfer from '@src/modules/task/taskTypes/taskPool/componets/TaskTransfer.vue'
import TaskMap from '@src/modules/task/taskTypes/taskPool/componets/TaskMap.vue'
import AllotMapDialog from '@src/modules/task/taskTypes/allot/components/AllotMapDialog/AllotMapDialog.tsx'
import ViewportDropdown from '@src/component/ViewportDropdown/index.vue';
import AdvancedSearchModal from '@src/component/AdvancedSearch/AdvancedSearchModal.vue'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* render */
import TaskPoolListRender from '@src/modules/task/taskTypes/taskPool/TaskPoolListRender.tsx'
/* scss */
import '@src/modules/task/taskTypes/taskPool/TaskPoolList.scss'
/* vue */
import { Component } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import { TASK_POOL_LIST_DISPATCHING_NOT_BEEN_ENABLED } from '@src/model/const/Alert'
import * as _ from 'lodash';
import i18n from '@src/locales'
import { parse } from '@src/util/querystring';
import { fetchViewportList } from '@src/api/Viewport';
import ViewportType from '@src/component/ViewportDropdown/viewport'

@Component({ 
  name: ComponentNameEnum.TaskPoolList,
  components: {
    [PlanTimeDialog.name]: PlanTimeDialog,
    [CalendarPlanTimeDialog.name]: CalendarPlanTimeDialog,
    [TaskTransfer.name]: TaskTransfer,
    [TaskMap.name]: TaskMap,
    [ComponentNameEnum.AllotMapDialog]: AllotMapDialog,
    [ViewportDropdown.name]: ViewportDropdown,
    [AdvancedSearchModal.name]: AdvancedSearchModal,
  }
})
export default class TaskPoolList extends TaskPoolListRender {

  
  async mounted() {
    // 恢复常用
    this.recoverCommonUse();
    // 获取初始化数据
    await this.fetchInitData()
    // 页面参数中有viewNo时说明是复制的视图地址
    const query = parse(window.location.search) || {}
    const viewNo = query.viewNo || ''
    let viewData: ViewportType = {}
    if (viewNo) {
      const list = await fetchViewportList('taskPool')
      viewData = (list || []).find((item: ViewportType) => viewNo === item.viewNo)
    }
    // 页面参数中有viewNo时直接使用chooseView方法，因为viewportSearchModel更新后会执行一遍search
    // 获取工单池列表
    viewNo && viewData && viewData.searchModel ? this.chooseView(viewData) : this.search();
    // 初始化工单字段列表
    this.initializeTaskTypeAllFields()
    // 获取工单详情头部信息
    this.fetchTaskPoolInfos()
    // 获取全部工单类型数据
    this.fetchTaskTypesMap()
    // [tab_spec]标准化刷新方式
    window.__exports__refresh = async () => {
      setTimeout(() => {
        this.search()
      }, 1000)
    }
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event:any)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
    this.$nextTick(()=> {
      this.knowTableContainerHeight()
      window.onresize = _.debounce(()=>{
        that_.knowTableContainerHeight()
      }, 500)
    })
  }
  
  render(h: CreateElement) {
    // 属性列表
    const attrs = this.getAttributes()
    
    // 地图模式时，工单池信息、操作按钮、列表不显示，搜索区域默认收起
    return (
      <permission auth={this.taskConfig?.taskPoolOn} text={TASK_POOL_LIST_DISPATCHING_NOT_BEEN_ENABLED}>
        <div {...attrs}>
          <div v-show={!this.mapShow}>{ this.renderTaskPoolInfoContainer() }</div>
          { this.renderHeaderContainer() }
          <div v-show={!this.mapShow}>{ this.renderOperationContainer() }</div>
          <div v-show={!this.mapShow}>{ this.renderContentContainer() }</div>
          { this.renderComponentsContainer() }
        </div>
      </permission>
    )
  }


  public packUp:boolean = true

  /**
   * @description: 渲染头部容器
   * @return {VNode}
   */ 
  public renderHeaderContainer():any {
    return (
      <div ref="tableHeaderContainer" class='header-container'>
        <div class='common-list-header__v2'>
          <div class='common-list-header__left'>
            { this.renderViewportDropdown() }
            { this.renderAdvancedSearchModal() }
          </div>
          <div class='common-list-header__right flex-x'>
            <div class="search-container">
              { this.renderSearchContainer() }
            </div>
            { this.renderAdvancedSearchButton() }
          </div>
        </div>

        {this.packUp?<div class="task-type-filter">
          <div class="task-list-header-nav">
            <div class="task-filter-item">
              <div class="task-font14 task-c7 state">{i18n.t('common.task.taskType')}：</div>
              <div class="list" >
                <div class="list-item task-flex task-ai">
                  {[...[{name:i18n.t('common.base.all'),id:undefined}],...this.taskTypes1].map((item:any)=>{
                    return (item.id == this.currentTaskType?.id )?<div class="task-nav-create task-c2 task-padding-0" onClick={() => this.changeTaskType(item)}>
                      <div class="actived" title={item.name}>{item.name}</div>
                    </div>: <div class="task-nav-create" onClick={() => this.changeTaskType(item)}>
                      <span title={item.name}>{item.name}</span>
                    </div>
                  })}
                </div>
              </div>
            </div>
          </div>
          </div>:null}
          <div class="pack-up">
            <div onClick={() => this.changePackUpLocal()}>
              {this.packUp?<i class="iconfont icon-Icon_up"></i>:<i class="iconfont icon-more" ></i>}
            </div>
          </div>
      </div>  
    )
  }

  public changeTaskType(item:any){
    // @ts-ignore
    this.$track.clickStat(this.$track.formatParams('QUICK_SEARCH', '工单类型'));

    const {name,id}=item
    this.currentTaskType = {
      id: id || undefined,
      name,
      templateId:id || undefined
    }
    this.initializeTaskTypeAllFields()
    this.refresh()
  }
}

